<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Alpine!</title>
    <script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.min.js"></script>
    <script src="//unpkg.com/alpinejs" defer></script>
<!--    <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/uno.global.js"></script>
    <link rel="preconnect" href="https://static.zeoseven.com" crossorigin />
    <link rel="stylesheet" href="https://static.zeoseven.com/zsft/48/main/result.css" />

    <style>
        body {
            font-family: "Source Han Serif VF";
            font-weight: normal;
        }
    </style>
</head>
<body>


<script>
</script>

<h1 class="text-5xl text-center mb-8">Memory Game!</h1>
<div x-data="{
    init() {
        $data.isPlaying = true;
        $data.status =new Array(12).fill(false);
        $data.openedCardNumber = 0;
        $data.info = '';
        $data.lastClickedUrl =  null;
        $data.images = _.shuffle(['https://images.unsplash.com/photo-1496483648148-47c686dc86a8', 'https://images.unsplash.com/photo-1520763185298-1b434c919102', 'https://images.unsplash.com/photo-1442458017215-285b83f65851', 'https://images.unsplash.com/photo-1520763185298-1b434c919102', 'https://images.unsplash.com/photo-1442458017215-285b83f65851', 'https://images.unsplash.com/photo-1626808642875-0aa545482dfb', 'https://images.unsplash.com/photo-1496483648148-47c686dc86a8', 'https://images.unsplash.com/photo-1591181520189-abcb0735c65d', 'https://images.unsplash.com/photo-1591181520189-abcb0735c65d', 'https://images.unsplash.com/photo-1546842931-886c185b4c8c', 'https://images.unsplash.com/photo-1546842931-886c185b4c8c', 'https://images.unsplash.com/photo-1626808642875-0aa545482dfb']);

        console.log('init')
    },

    }"
     class="Game w-1/2 grid grid-cols-4 gap-4 mx-auto pos-relative">

    <script>
        function handleClick(data, index) {

            console.log('Clicked!');
            console.log(data.openedCardNumber);
            // console.log(data);
            if (data.openedCardNumber % 2 != 0
                    && data.lastClickedUrl != data.images[index]) {
                data.openedCardNumber = data.lastClickedUrl;
                data.status = new Array(12).fill(false);
                data.openedCardNumber = 0;
            }


            data.status[index] = true;
            data.openedCardNumber += 1;
            data.lastClickedUrl = data.images[index];

            if(data.openedCardNumber === data.images.length) {
                data.info = 'Congratulations! 👍'
                data.isPlaying = false;
            }
        }
    </script>

    <template x-for="(image,index) in images">
        <div  @click="
        info = `卡片${index+1}被点击了`;
        handleClick($data,index);
        "
        class="Card overflow-hidden aspect-square bg-gray-200 cursor-pointer "><img x-show="status[index]" alt=""
                                                                           class="w-full h-full" :src="image"/>
        </div>

    </template>

    <div x-show="!isPlaying" class="color-white text-center pos-absolute bg-blueGray/50 w-full h-full flex flex-col justify-center items-center text-5xl cursor-pointer"
         @click="
            if(!isPlaying) {
                $data.init();
            }
         "
    >
        <p >Congratulations! 😄</p>
        <p class="text-2xl">任意点击重新开始...</p>
    </div>

    <div x-show="isPlaying" class="col-span-full text-center" x-text="info">
    </div>
</div>
</body>
</html>